import React, { useState, useEffect } from 'react'
import { Menu, Button, Select } from 'antd';
import axios from 'axios'
import { MailOutlined, AppstoreOutlined, UserOutlined } from '@ant-design/icons';
import HouseShow from './HouseShow';
import TotalClassShow from './TotalClassShow';
import styles from '../../styles/home/totalInfoShow.scss'
import { axiosConfig, backIP } from '../common/config';
import { getToken } from '../common/util';
import UserListShow from './UserListShow';
const { Option } = Select;

export interface houseItemConfig {
    id: number,
    value: string,
    floor_number: number
}

export default function TotalInfoShow() {
    const [current, setCurrent] = useState('house')
    const [houseList, setHouseList] = useState<houseItemConfig[]>([])
    const [selectHouseIndex, setSelectHouseIndex] = useState<number | null>(null)
    const [selectFloor, setSelectFloor] = useState<number | null>(null)
    const [addIndex, setAddIndex] = useState<number | null>(null) // 1为教学楼，2为教室，3为用户

    useEffect(() => {
        getHouseList()
    }, [])
    const handleClick = e => {
        setCurrent(e.key)
    };
    const getHouseList = async () => {
        const token: string = getToken();
        const { data: res }: { data: axiosConfig } = await axios.get(`${backIP}/floor`, {
            headers: {
                Authorization: token,
            }
        })
        setHouseList(res.data)
    }
    const judgePage = () => {
        const contrast = {
            'house': <HouseShow addIndex={addIndex} setAddIndex={setAddIndex} />,
            'class': <TotalClassShow
                addIndex={addIndex}
                houseIndex={selectHouseIndex}
                selectFloor={selectFloor}
                houseList={houseList}
                setAddIndex={setAddIndex}
            />,
            'user': <UserListShow
                addIndex={addIndex}
                setAddIndex={setAddIndex}
            />
        }

        return contrast[current]
    }
    const getHouseSeatNum = () => {
        let selectHouseItem: houseItemConfig;
        houseList.map(houseItem => {
            if (houseItem.id === selectHouseIndex) {
                selectHouseItem = houseItem
            }
        })

        if (selectHouseItem) {
            const seatShowArr = [];
            for (let index = 1; index <= selectHouseItem.floor_number; index++) {
                seatShowArr.push(
                    <Option key={index} value={index}>{`第${index}层`}</Option>
                )
            }
            return seatShowArr;
        }

        return null
    }
    const handleAddIndex = () => {
        const contrast = {
            house: 1,
            class: 2,
            user: 3
        }
        setAddIndex(contrast[current])
    }
    const judgeShowBtn = () =>{
        const contrast = {
            house: '教学楼',
            class: '教室',
            user: '用户'
        }
        return `新增${contrast[current]}`
    }
    return (
        <div>
            <div className={styles.nav}>
                <Menu onClick={handleClick} selectedKeys={[current]} mode="horizontal">
                    <Menu.Item key="house" icon={<MailOutlined />}>
                        教学楼
                    </Menu.Item>
                    <Menu.Item key="class" icon={<AppstoreOutlined />}>
                        教室
                    </Menu.Item>
                    <Menu.Item key="user" icon={<UserOutlined />}>
                        成员
                    </Menu.Item>
                </Menu>
                <div style={{
                    display: (current === 'class' ? 'block' : 'none')
                }}>
                    <Select defaultValue="无" style={{ width: 120 }} onChange={(value: any) => setSelectHouseIndex(value)}>
                        {
                            houseList.map(houseItem => {
                                return <Option key={houseItem.id} value={houseItem.id}>{houseItem.value}</Option>
                            })
                        }
                    </Select>
                </div>
                <div style={{
                    display: (current === 'class' ? 'block' : 'none')
                }}>
                    <Select defaultValue="无" style={{ width: 120 }} onChange={(value: any) => setSelectFloor(value)}>
                        {getHouseSeatNum()}
                    </Select>
                </div>
                <Button
                    type="primary"
                    onClick={handleAddIndex}
                >
                    {judgeShowBtn()}
                </Button>
            </div>
            {
                judgePage()
            }
        </div>
    )
}
